<template>
    <div class="page-article">
        <div class="d-flex py-3 px-2 border-bottom">
            <div class="iconfont icon-back text-blue"></div>
            <strong class="flex-1 text-ellipsis text-blue pl-2">
                {{ articleInfo.title }}
            </strong>
            <div class="text-grey fs-sm">
                2020-07-05
            </div>
        </div>
        <div v-html="articleInfo.body" class="px-3 body fs-lg"></div>
        <div class="px-3 border-top py-3">
            <div class="d-flex ai-center">
                <i class="iconfont icon-menu"></i>
                <strong class="text-blue fs-lg ml-1">相关资讯</strong>
            </div>
            <div class="pt-2">
                <router-link class="py-2" :to="`/articles/${item._id}`" tag="div" v-for="item in articleInfo.related" :key="item._id">
                    {{item.title}}
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Article",
        props: {
            id: { required: true }
        },
        data() {
          return {
              articleInfo: {}
          }
        },
        created() {
            this.fetchArticles();
        },
        methods: {
            async fetchArticles() {
                const res = await this.$http.get(`/articles/${this.id}`);
                this.articleInfo = res.data;
            }
        },
        watch: {
            id() {
                this.fetchArticles();
            }
        }
    }
</script>

<style lang="scss">
    .page-article{
        .icon-back {
            font-size: 1.6923rem;
        }
        .body {
            img {
                max-width: 100%;
                height: auto;
            }
            iframe {
                width: 100%;
                height: auto;
            }
        }
    }
</style>
